<template>
  <div class="wert">
    <el-container>
      <el-header>
        <img
          src="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E7%B3%BB%E7%BB%9F%E6%A1%86%E6%9E%B6/u1117.png"
        />
        <span style="font-weight: 900; font-size: 22px; margin-left: 0.2%"
          >区块链版权存证平台</span
        >
        <div class="back" @click="router.push('/')">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        <div class="uset">
          <img :src="userPng" class="imt" /><el-icon
            size="20px"
            @click="zhuat"
            :style="{ transform: fan ? 'rotate(-90deg)' : 'rotate(0deg)' }"
          >
            <CaretLeft />
          </el-icon>
          <ul v-if="xia">
            <li>
              <img
                src="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E7%B3%BB%E7%BB%9F%E6%A1%86%E6%9E%B6/u1108.png"
                style="width: 15px; height: 9px"
              />
              <span @click="zhanghu">账户设置</span>
            </li>
            <li>
              <img
                src="https://www.axured.cn/assets/axurefiles/cd1bba2356076c2843e405e9e753b8f7_942/images/%E7%B3%BB%E7%BB%9F%E6%A1%86%E6%9E%B6/u1111.png"
                style="width: 15px; height: 9px"
              />
              <span @click="logout">退出登录</span>
            </li>
          </ul>
        </div>
      </el-header>
      <el-container>
        <el-aside :style="{ width: shows2 ? '65px' : '170px' }">
          <span class="shrink" :style="{ left: shows2 ? '3.4%' : '10.3%' }">
            <el-icon size="23px" @click="shirlt">
              <Open />
            </el-icon>
          </span>
          <el-menu
            :collapse="shows"
            class="el-menu-vertical-demo"
            :default-active="
              store.getters.pathname.path
                ? store.getters.pathname.path
                : '/console/home'
            "
            text-color="#000"
            @open="handleOpen"
            @close="handleClose"
            unique-opened
            collapse-transition
            router
          >
            <el-menu-item
              :index="i.path"
              v-for="(i, index) in store.getters.menus"
              v-show="i.children.length == 0"
              :key="index"
              @click="wer(i)"
            >
              <el-icon>
                <component :is="iconst[i.name]"></component>
              </el-icon>
              <span>{{ i.name }}</span>
            </el-menu-item>
            <el-sub-menu
              :index="i.path"
              v-for="(i, index) in store.getters.menus"
              v-show="i.children.length != 0"
              :key="index"
            >
              <template #title>
                <el-icon>
                  <component :is="iconst[i.name]"></component>
                </el-icon>
                <span>{{ i.name }}</span>
              </template>
              <el-menu-item
                @click="wer(item)"
                :index="item.path"
                v-for="(item, index) in i.children"
                :key="index"
              >
                <template #title>
                  <el-icon>
                    <component :is="iconst[item.name]"></component>
                  </el-icon>
                  <span>{{ item.name }}</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="title">
            <div class="tetit">
              <h4
                v-show="!xinser"
                :style="{
                  transform: ser ? 'translateX(-120%)' : 'translateX(0)',
                }"
              >
                {{ store.getters.pathname.name }}
              </h4>
              <h4
                v-show="xinser"
                :style="{
                  transform: ser ? 'translateX(100%)' : 'translateX(0)',
                }"
              >
                {{ store.getters.pathname.name }}
              </h4>
            </div>
          </div>
          <router-view
            class="animate__animated animate__fadeIn"
            style="margin-top: 61px"
          ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { Sunny, Moon } from "@element-plus/icons-vue";
import axios from "axios";
const store = useStore();
const router = useRouter();
let switchIsTrue = ref(true);
const userPng = ref("");
let iconst = {
  首页: "House",
  账户管理: "User",
  订单管理: "Operation",
  存证管理: "Help",
  开放平台: "Share",
  充值及订单: "Briefcase",
  购买服务: "Operation",
  取证管理: "Collection",
};
// 路由名称跳转属性
let ser = ref(false);
let xinser = ref(false);
const wer = (data) => {
  ser.value = !ser.value;
  setTimeout(() => {
    ser.value = !ser.value;
    store.commit("setrouter", data);
    xinser.value = !xinser.value;
    setTimeout(() => {
      xinser.value = !xinser.value;
    }, 100);
  }, 600);
};
onMounted(() => { getuser();});
// 小三角旋转属性
let fan = ref(false);
let xia = ref(false);
let shows = ref(false);
let shows2 = ref(false);
const shirlt = () => {
  shows.value = !shows.value;
  setTimeout(() => {
    shows2.value = !shows2.value;
  }, 100);
 
};
const zhuat = () => {
  fan.value = !fan.value;
  setTimeout(() => {
    xia.value = !xia.value;
  }, 1000);
};
const zhanghu = () => {
  router.push("/console/account");
};
// 退出登录
const logout = () => {
  window.sessionStorage.removeItem("token");
  router.push("/");
};

const getuser = async () => {
  console.log(1);
  let id = store.state.userInfo.id;
  let {data} = await axios.get("http://127.0.0.1:7011/reception/getuser", { params: {id} });
  userPng.value = data.data[0].face
  console.log(userPng.value);
};
</script>
  
<style lang="less" scoped>
.wert {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-container {
    width: 100%;
    height: 100%;

    .el-header {
      width: 100%;
      height: 8%;
      background-color: #464c5b;
      color: #fff;
      display: inline-flex;
      align-items: center;
      position: relative;
      z-index: 100;
      .back {
        width: 60px;
        height: 100%;
        line-height: 70px;
        position: absolute;
        right: 10%;
        text-align: center;
        z-index: 1000;
        .el-icon {
          width: 100%;
          height: 100%;
          font-size: 20px;
        }
      }
      .back:hover .el-icon {
        cursor: pointer;
      }
      .uset {
        width: 10%;
        height: 100%;
        position: absolute;
        right: 2%;
        text-align: center;
        z-index: 10;

        .imt {
          width: 23%;
          height: 55%;
          border-radius: 50%;
          background-color: #fff;
        }

        .imt,
        .el-icon {
          display: inline-block;
          vertical-align: middle;
          margin-top: 9%;
        }

        .el-icon {
          transform-style: preserve-3d;
          transition: 0.7s 0.3s;
        }

        ul {
          width: 100%;
          height: 80px;
          margin-top: 10%;
          background-color: #fff;
          box-shadow: 1px 3px 5px 3px #eee;

          li:hover {
            background-color: #464c5b3b;
          }

          li {
            color: #000;
            padding: 0 1%;
            width: 100%;
            height: 50%;
            list-style: none;
            text-align: left;
            line-height: 40px;

            cursor: pointer;

            span,
            img {
              margin-left: 10%;
              display: inline-block;
              font-size: 13px;

              vertical-align: baseline;
            }
          }
        }
      }
    }

    .el-aside {
      height: 99%;
      background-color: #fff;
      overflow: hidden;

      .shrink {
        position: fixed;
        top: 10%;
        text-align: center;
        z-index: 1000;
      }
    }

    .el-main {
      padding: 0 0;

      .title {
        width: 100%;
        height: 8%;
        background-color: var(--vt-c-white) !important;
        position: fixed;
        top: 10;
        z-index: 10;
        box-shadow: 1px 0px 2px 1px #7f7f7f;

        .tetit {
          margin-left: 2%;
          width: 5%;
          height: 100%;
          display: flex;
          align-items: center;
          overflow: hidden;

          h4 {
            transform-style: preserve-3d;
            transition: 0.3s 0.3s;
          }
        }
      }
    }
  }
}
</style>
    